<template>
	<div>
		<el-row justify="end">
			<el-col :span="10" style="display: flex;justify-content: flex-end;align-items: center;">
				<el-button size="mini" type="primary" v-if="isscreen"
				style="margin-right: 1rem;" @click="reset()">恢复</el-button>
				<label>按条件查询：</label>
				<el-select v-model="ispay" size="medium" style="width: 120px;">
					<el-option value="未付款">未付款</el-option>
					<el-option value="已付款">已付款</el-option>
				</el-select>
				<el-date-picker type="daterange"
					range-separator="-"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					size="medium"
					style="width: 40%;"
					v-model="times">
				</el-date-picker>
				<el-button style="height: 36px;line-height: 10px;" @click="queryLocal()">查询</el-button>
			</el-col>
		</el-row>
		<el-table :data="newOrders.slice((this.page-1)*this.num,this.page*this.num)" style="width: 100%;">
			<el-table-column label="序号" type="index" align="center"/>
			<el-table-column label="订单号" prop="ordid"/>
			<el-table-column label="快递运单" prop="shipno"/>
			<el-table-column label="联系电话" prop="phone"/>
			<el-table-column label="收货地址" prop="addr"/>
			<el-table-column label="总价" prop="amount"/>
			<el-table-column label="是否付款" align="center">
				<template #default="scope">
					<label v-html="filterPay(scope.row.ispay)"
					:style="{'color':(scope.row.ispay==1?'green':'red')}"></label>
				</template>
			</el-table-column>
			<el-table-column label="下单时间">
				<template #default="scope">
					{{filterDate(scope.row.tcreate)}}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="right" width="200">
				<template #default="scope">
					<el-button size="small" type='danger' v-if="scope.row.ispay==0" 
					@click="$router.push({name:'cart_pay',query:{ordid:scope.row.ordid}})">去付款</el-button>
					<!-- 子组件-显示订单明细 -->
					<el-popover placement="left" width="600px" trigger="click" >
						<template #reference>
						    <el-button size="small"
								@click="getOrderInfoById(scope.row.ordid)">明细
							</el-button>
						</template>
						<p>{{scope.row.ordid}}#订单详情  发往：{{scope.row.addr}}</p>
						<el-table :data='OrderInfo' style="width: 100%;">
							<el-table-column label="图片">
								<template #default="scope">
									<el-avatar shape="square" 
										:src="`${$ServerUrl}/api/public/showImg/${scope.row.picture}`">
									</el-avatar>
								</template>
							</el-table-column>
							<el-table-column label="名称" prop="name"></el-table-column>
							<el-table-column label="单价" prop="price"></el-table-column>
							<el-table-column label="数量" prop="num"></el-table-column>
							<el-table-column label="小计" prop="">
								<template #default="scope">
									{{scope.row.price * scope.row.num}}
								</template>
							</el-table-column>
						</el-table>
					</el-popover>
				</template>
			</el-table-column>
		</el-table>
		<el-row justify="center">
			<el-pagination background layout="prev, pager, next"
			  :total="total"
			  :page-size="num"
			  :hide-on-single-page="true"
			  v-model:currentPage="page">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
import { ElMessage } from 'element-plus';
export default{
	name:'MyOrder',
	data(){
		return {
			ispay:'未付款',
			isscreen:false,//筛选模式
			times:'',
			orders:[],//订单信息
			newOrders:[],
			OrderInfo:[],//单条订单详细
			total:0,
			num:10,//每页数量
			page:1,//当前页码
		}
	},
	computed:{
		filterPay(){
			return (x)=>{
				return Number(x) === 1 ? '已付款':'未付款'
			}
		},
		filterDate(){
			return (t)=>{
				let now = new Date(t);
				let year = now.getFullYear();
				let month = this.toNum(now.getMonth() + 1);
				let day = this.toNum(now.getDate());
				return `${year}-${month}-${day}`;
			}
		}
	},
	methods:{
		toNum(t){
			return t>=10 ? t: '0'+t;
		},
		getOrders(){
			//获取订单列表
			this.axios.get('/api/fore/ord/findOrdLineByPage/0/9999').then((res)=>{
				let data = res.data;
				if(data.code==200){
					this.orders = this.newOrders = data.data.orders;
					this.total = data.data.total;
				}
			}).catch((err)=>{
				//console.log(err);
			})
		},
		//获取指定订单编号的订单信息
		getOrderInfoById(id){
			this.OrderInfo = [];
			this.axios.post('/api/adm/ord/findItemInfoByOrdid/'+id).then((res)=>{
				if(res.status==200){
					if(res.data.code==200){
						this.OrderInfo = res.data.data;
					}
				}
			}).catch((err)=>{
				//console.log(err);
			})
		},
		//按条件查询【访问接口】已弃用，测试传任何数据都返回全部信息
		query(){
			if(this.times.length<2)return false;
			let arg = {
				tstart : this.times[0].getTime(),
				tend   : this.times[1].getTime(),
				ispay  : this.ispay=='未付款'?0:1
			}
			console.log(arg);
			this.axios.post('/api/fore/ord/findOrdLines',arg).then((res)=>{
				let data = res.data;
				if(data.code==200){
					this.orders.orders = data.data;
					this.orders.total = 0;
				}
			}).catch((err)=>{
				//console.log(err);
			})
		},
		//按条件查询【前端筛选】
		queryLocal(){
			this.isscreen = true;
			var arg = {};
			if(this.times.length==2){
				arg = {
					tstart : this.times[0].getTime(),
					tend   : this.times[1].getTime(),
				}
			}
			//console.log(this.orders);
			this.newOrders = [];
			//筛选规则：如果仅选择了付款状态，则匹配付款状态，不匹配订单日期数据
			//如果付款状态和筛选日期都有数据，就匹配付款状态与订单日期按照查询要求一致的数据
			for(let item of this.orders){
				if(this.times.length==2){
					if(this.times.length==2 && (this.ispay=='未付款'?0:1) == item.ispay && item.tcreate>=arg.tstart && item.tcreate<=arg.tend){
						this.newOrders.push(item);
					}
				}else{
					if((this.ispay=='未付款'?0:1) == item.ispay){
						this.newOrders.push(item);
					}
				}
			}
			this.total = this.newOrders.length;
		},
		//恢复
		reset(){
			this.ispay='未付款';
			this.times='';
			this.isscreen = false;
			this.newOrders = this.orders;
			this.total = this.newOrders.length;
			this.page=1;
		}
	},
	created() {
		this.getOrders();
	}
}
</script>

<style>
</style>
